import React, { useState } from "react";
import SearchBar from "./SearchBar";
import ProductTable from "./ProductTable";
import { Product } from "./interface";
import "./index.less";

/**
 * 静态数据products
 */
const PRODUCTS: Product[] = [
  { category: "Fruits", price: "$1", stocked: true, name: "Apple" },
  { category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit" },
  { category: "Fruits", price: "$2", stocked: false, name: "Passionfruit" },
  { category: "Vegetables", price: "$2", stocked: true, name: "Spinach" },
  { category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin" },
  { category: "Vegetables", price: "$1", stocked: true, name: "Peas" }
];

/**
 * (灰色)包含完整的应用
 * @returns 函数组件
 */
const FliterableProductTable: React.FC = () => {
  const [filterText, setFilterText] = useState("");
  const [inStockOnly, setInStockOnly] = useState(false);

  return (
    <main className="filterable-product-table">
      <SearchBar
        filterText={filterText}
        inStockOnly={inStockOnly}
        filterTextChange={setFilterText}
        inStockOnlyChange={setInStockOnly}
      />
      <ProductTable products={PRODUCTS} filterText={filterText} inStockOnly={inStockOnly} />
    </main>
  );
};
export default FliterableProductTable;
